<template>
    <div class="photo-info-container">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ photoinfo.add_time | dateFormat }}</span>
            <span>点击：{{ photoinfo.click }}次</span>
        </p>
        <hr>

        <!-- 缩略图区域 -->
        <vue-preview :slides="list" @close="handleClose" class="thumb"></vue-preview>

        <!-- 图片内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <sub-comment :id="this.id"></sub-comment>
    </div>
</template>
<style lang="scss">
    .photo-info-container{
        padding: 3px;
        h3{
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
        }
        .thumb{
            div{
                figure{
                    display: inline-block;
                    margin: 10px;
                }
                img{
                    width: 100px;
                    box-shadow: 0 0 8px #999;
                }
            }
        }
    }
</style>
<script>


import Comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
            id: this.$route.params.id,
            photoinfo: {},
            list: []
        }
    },
    created(){
        this.getPhotoInfo(this.id)
        this.getThumbs(this.id)
    },
    methods: {
        getPhotoInfo(id){
            this.$http
                .get('api/getimageInfo/' + id)
                .then(result => {
                    if (result.body.status === 0) {
                        this.photoinfo = result.body.message[0]
                    }
                })
        },
        handleClose () {
            console.log('close event')
        },
        getThumbs(id){
            this.$http
                .get('api/getthumimages/' + id)
                .then(result => {
                    if (result.body.status === 0) {
                        let temp = result.body.message
                        temp.forEach(item => {
                            item.w = 600
                            item.h = 400
                            item.msrc = item.src
                        })
                        this.list = temp
                    }
                })
        }
    },
    components: {
        "sub-comment": Comment
    }
}
</script>

